<!DOCTYPE html>
<html lang='en'>
<head>
<meta charset='UTF-8'>
<meta name='viewport' content='width=device-width, initial-scale=1.0'>
<title>Document</title>
<style>
  li{
    line-height: 50px;
    width: 600px;
    margin-top: 10px;
    background-color: purple;
  }
</style>
</head>
<body>

  <div id='app'>
    <button @click="addLi">增加一个li</button>
    <ul>
      <li v-for="(el, index) in arr">
        {{ el }}
      </li>
    </ul>
  </div>

<script src='https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.js'></script>
<script>
  const app = new Vue({
    el: '#app'
    ,data:{
      arr: [1,2,3,4]
    }
    ,methods: {
      addLi () {
        this.arr.push(this.arr.length+1)
        this.$nextTick(()=>{
          console.log('这是一个监听者，回调函数会在数据改变后，DOM更新后执行');
          const oul = document.querySelector('ul');
          oul.lastChild.style.backgroundColor = "red";
          console.log(oul.children);
        })
        // 获取所有的li
      }
    }
  })
</script>
</body>
</html>